<template>
  <section class="report-box">
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>姓名：</span>
          <el-input v-model="username" size="small" class="select-box"></el-input>
        </label>
        <label for="" class="choose">
          <span>证件号码：</span>
          <el-input v-model="idCard" size="small" class="select-box"></el-input>
        </label>
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="search">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <el-row class="data-list">
      <el-col>
        <el-tabs v-model="activeName" @tab-click="tabChange">
          <el-tab-pane label="未录取" name="0">
            <el-row type="flex" justify="end">
              <el-button icon="self-daochu" size="small" @click="load" class="blue">导出</el-button>
            </el-row>
            <el-row>
              <ctable selection :thead="theadData" :table-data="dataList" :options="options" :page-data="pageObj" v-on:selectData="selectLists = arguments[0]">
                <div class="has-choose">已选{{selectLists.length}}人 <el-button size="small" @click="recordOption">录取</el-button></div>
              </ctable>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="已录取" name="1">
            <el-row type="flex" justify="end">
              <el-button icon="self-daochu" size="small" @click="load" class="blue">导出</el-button>
            </el-row>
            <el-row>
              <ctable selection :thead="theadData" :table-data="dataList" :options="options1" :page-data="pageObj" v-on:selectData="selectLists = arguments[0]">
                <div class="has-choose">已选{{selectLists.length}}人 <el-button size="small" @click="recordOption">取消录取</el-button></div>
              </ctable>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <choose-class :show-dialog.sync="showFlag" :data-lists="classList" :close-callback="diaClose" v-on:select="enroll">
      <span slot="titleName">选择缴费班级</span>
    </choose-class>
  </section>
</template>
<script>
import { getStudentsList, getStudentDel, getStudentEnroll, getClassList } from 'api/school/student/index'
import ctable from 'components/common/ctable'
import chooseClass from 'components/chooseclass/chooseClass'
import { sexFilter } from 'src/filter'
export default {
  data () {
    return {
      username: '', // 姓名
      idCard: '', // 证件号码
      theadData: [{ // table thead信息
        prop: 'name',
        name: '姓名',
        width: 100
      }, {
        prop: 'sex',
        name: '性别',
        format: this.sexData
      }, {
        prop: 'birth',
        name: '出生日期',
        format: this.format
      }, {
        prop: 'guardian',
        name: '父/母姓名'
      }, {
        prop: 'mobile',
        name: '联系电话'
      }, {
        prop: 'address',
        name: '家庭住址'
      }],
      options: [{ // 操作
        name: '录取',
        callback: this.btnOption
      }, {
        name: '详情',
        callback: this.toDetail
      }, {
        name: '编辑',
        callback: this.toEdit
      }, {
        name: '删除',
        callback: this.delSubmit,
        type: 'del'
      }],
      options1: [{ // 操作
        name: '取消录取',
        callback: this.btnOption
      }, {
        name: '详情',
        callback: this.toDetail
      }],
      activeName: '0', // tab导航栏默认
      selectLists: [], // 选中数据
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      dataList: [], // 数据
      showFlag: false,
      classList: [], // 所有班级
      studentIds: [] // 选中学生id
    }
  },
  components: {
    ctable,
    chooseClass
  },
  created () {
    this.getData(1)
    getClassList().then(res => {
      this.classList = res.data
    })
  },
  methods: {
    recordOption () { // 批量操作（录取、取消录取）
      if (!this.selectLists.length) {
        return this.$alert('请先选择学生', '提示', {
          confirmButtonText: '确定',
          callback: function () {}
        })
      }
      this.studentIds = this.selectLists.map(item => {
        return item.id
      })
      if (this.activeName === '0') this.showFlag = true // 录取
      else this.cancelAdmission() // 取消录取
    },
    btnOption (item) { // 取消录取、录取按钮
      this.studentIds = []
      this.studentIds[0] = item.id
      if (this.activeName === '0') this.showFlag = true // 录取
      else this.cancelAdmission() // 取消录取
    },
    cancelAdmission () { // 取消录取
      this.$confirm('取消录取, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.enroll()
      })
    },
    enroll (obj = {}) { // 发送是否录取消息
      getStudentEnroll({
        ids: this.studentIds,
        enroll: this.activeName === '0' ? 1 : 0,
        gradeYear: this.activeName === '0' ? obj.gradeId : 0,
        classId: this.activeName === '0' ? obj.classId : 0
      }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.getData(1)
      })
    },
    search () { // 搜索
      this.getData(1)
    },
    load () { // 导出
      let loginKey = window.localStorage.loginKey
      window.open(`/net/schooladmin/school-student/export?unClass=0&classId=0&isEnroll=${Number(this.activeName)}&cardNo=${this.idCard}&name=${this.username}&login-key=${loginKey}`)
    },
    format (row, col, value) { // 日期过滤
      return this.timeFormat(value, 'yyyy-MM-dd hh:mm:ss')
    },
    sexData (row, col, value) { // 性别数据处理
      return sexFilter(value)
    },
    toDetail (item) { // 详情
      this.$router.push({name: 'studentReportDetail', query: {id: item.id}})
    },
    toEdit (item) { // 编辑
      this.$router.push({name: 'studentEdit', query: {id: item.id}})
    },
    getData (int) { // 获取数据
      getStudentsList({
        classId: this.activeName === '0' ? 0 : undefined,
        page: int,
        count: 15,
        cardNo: this.idCard,
        name: this.username,
        isEnroll: Number(this.activeName)
      }).then(res => {
        this.dataList = res.data
        this.pageObj.page = res.page
      })
    },
    delSubmit (obj, index) { // 删除确认
      getStudentDel({
        id: obj.id
      }).then(res => {
        this.dataList.splice(index, 1)
      })
      this.dataList[index].visible = false
    },
    tabChange () { // tab导航栏改变
      this.getData(1)
    },
    diaClose () { // 关闭对话框回调
      this.showFlag = false
    }
  }
}
</script>
<style lang="less" scoped>
.report-box {
  padding: 15px 25px 0;
  .search-box {
    padding: 25px 0 25px 25px;
    border: 1px solid #d3dce6
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
  }
  .data-list {
    margin-top: 30px;
  }
  .has-choose {
    color: #656565;
    font-size: 16px;
    margin: 10px 0 0 16px;
  }
} 
</style>